<template>
  <div class="bg-box">
    <t-table
      row-key="index"
      table-layout="auto"
      class="plugin-reports-order-table"
      :data="list"
      :columns="columns"
      :footData="[total]"
      hover
    >
      <template #time="{ rowIndex }">
        <div class="time">{{ time[rowIndex] }}</div>
      </template>
      <template #count="{ row }">
        {{ row.c ?? 0 }}
      </template>
      <template #cost_money="{ row }">
        {{ app.money.format(row.cm) }}
      </template>
      <template #tax_money="{ row }">
        {{ app.money.format(row.tm) }}
      </template>
      <template #req_money="{ row }">
        {{ app.money.format(row.rm) }}
      </template>
      <template #profit_money="{ row }">
        {{ app.money.format(row.pm) }}
      </template>
      <template #total="{ row }">
        <b>{{ app.money.format(row.t) }}</b>
      </template>

      <template #footCount>
        {{ total.count }}
      </template> 
      <template #footCost>
        {{  app.money.format(total.cost_money) }}
      </template> 
      <template #footTax>
        {{  app.money.format(total.tax_money) }}
      </template> 
      <template #footReq>
        {{  app.money.format(total.req_money) }}
      </template> 
      <template #footProfit>
        {{  app.money.format(total.profit_money) }}
      </template> 
      <template #footTotal>
        <div class="total" style="text-align: right">{{ app.money.format(total.total) }}</div>
      </template> 
    </t-table>
  </div>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['total', 'list', 'time'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'time',
    cell: 'time'
  }, {
    title: plugin.t('order.count'),
    colKey: 'count',
    cell: 'count',
    foot: 'footCount'
  }, {
    title: plugin.t('order.cost_money'),
    colKey: 'cost_money',
    cell: 'cost_money',
    foot: 'footCost'
  }, {
    title: plugin.t('order.tax_money'),
    colKey: 'tax_money',
    cell: 'tax_money',
    foot: 'footTax'
  }, {
    title: plugin.t('order.req_money'),
    colKey: 'req_money',
    cell: 'req_money',
    foot: 'footReq'
  }, {
    title: plugin.t('order.profit_money'),
    colKey: 'profit_money',
    cell: 'profit_money',
    foot: 'footProfit'
  }, {
    title: plugin.t('order.total'),
    colKey: 'total',
    align: 'right',
    fixed: 'right',
    foot: 'footTotal'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-order-table{
    .time{
      color: $color-content;
    }
    .total{
      color: $color;
      font-weight: bold;
    }
  }
</style>